<template>
  <div class="product">
    <div class="search">
      <template>
        <el-select
          v-model="searchValue"
          filterable
          clearable
          remote
          @change="searchTextChange"
          reserve-keyword
          @clear="clear"
          placeholder="请输入姓名,如果不更新,点击右侧搜索按钮"
          :remote-method="remoteMethod"
          :loading="loading"
        >
          <el-option
            v-for="item in searchList"
            :key="item.sId"
            :label="item.name"
            :value="item.name"
          >
          </el-option>
        </el-select>
      </template>
      <el-button
        type="primary"
        icon="el-icon-search"
        @click="onSearchButtonClick"
        plain
      ></el-button>
      <el-button type="primary" v-has="'add'" @click="addStu" :disabled="disabled"
        >添加项目</el-button
      >
    </div>
    <div class="select-class">
      <el-form>
        <el-form-item label="选择班级:">
          <el-select
            v-model="classes"
            filterable
            @visible-change="classVisible"
            @change="classChange"
            placeholder="请选择"
          >
            <el-option v-loading="selectLoading" label="全部" value="all"></el-option>
            <el-option
              :label="item"
              :value="item"
              v-for="(item, index) in classList"
              :key="index"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <div class="exportExcel">
      <el-button icon="iconfont icon-excel" @click="exportExcel">导出excel数据</el-button>
    </div>
    <div class="stu-table">
      <el-table :data="stuData" v-loading="loading" border style="width: 100%">
        <el-table-column prop="headimgurl" align="center" label="头像" width="100">
          <template v-slot="scope">
            <el-avatar
              shape="square"
              :size="50"
              fit="fill"
              :src="scope.row.headimgurl"
            ></el-avatar>
          </template>
        </el-table-column>
        <el-table-column prop="name" align="center" width="120" label="姓名">
        </el-table-column>
        <el-table-column prop="degree" align="center" label="学历"> </el-table-column>
        <el-table-column prop="class" align="center" label="班级"> </el-table-column>
        <el-table-column prop="productUrl" align="center" label="项目"> </el-table-column>
        <el-table-column prop="cTime" align="center" label="创建时间"> </el-table-column>
        <el-table-column align="center" label="操作">
          <template v-slot="{ row }">
            <el-button
              type="primary"
              class="btn"
              icon="el-icon-view"
              @click="showStu(row)"
              v-has="'read'"
              >查看</el-button
            >
            <el-button
              type="primary"
              class="btn"
              icon="el-icon-edit"
              @click="editStu(row)"
              v-has="'edit'"
              >编辑</el-button
            >
            <el-button
              type="danger"
              v-has="'delete'"
              class="btn"
              icon="el-icon-delete"
              @click="deleteStu(row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination">
      <el-pagination
        background
        hide-on-single-page
        layout="prev, pager, next"
        :current-page.sync="currentPage"
        @current-change="changePage"
        :page-size="stuPageSize"
        :total="stuTotal"
      >
      </el-pagination>
    </div>
    <szk-dialog></szk-dialog>
  </div>
</template>
<script>
  import * as api from "../../../../api";
  import { mapState, mapActions, mapMutations } from "vuex";
  import qee from "qf-export-excel"; 
  export default {
    
  }
</script>
<style scoped lang="less">
.search {
  line-height: 60px;
  text-align: left;
  margin: 20px 0;
  /deep/ .el-input__inner {
    width: 300px;
  }
}

.select-class {
  line-height: 40px;
  text-align: left;
  margin-bottom: 20px;
}
.stu-table .btn {
  width: 65px;
  height: 25px;
  padding: 0;
}
.pagination {
  margin-top: 20px;
}
/deep/ .exportExcel i.icon-excel {
  color: green;
  font-size: 20px;
  margin-right: 3px;
}

.exportExcel .el-button {
  padding: 4px 7px;
  float: right;
}
.exportExcel {
  margin-bottom: 10px;
  overflow: hidden;
}
</style>
